<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<th:block th:include="include :: head" />

<body>
<!-- Top Bar Start -->
<div class="topbar">
    <th:block th:include="include :: topbar" />
</div>
<!-- Top Bar End -->
<!-- Left Sidenav -->
<div class="left-sidenav">
    <th:block th:include="include :: left-sidenav" />
</div>
<!-- end left-sidenav-->
<div class="page-wrapper">
    <!-- Page Content-->
    <div class="page-content">
        <div class="container-fluid">
            <!-- Page-Title -->
            <div class="row">
                <div class="col-sm-12">
                    <div class="page-title-box">
                        <div class="float-right">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="javascript:void(0);">Crovex</a></li>
                                <li class="breadcrumb-item active">解绑</li>
                            </ol>
                        </div>
                        <h4 class="page-title">是否解除当前绑定账号的设备？</h4>
                    </div>
                    <!--end page-title-box-->
                </div>
                <!--end col-->
            </div><!-- end page title end breadcrumb -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="header-title mt-0">解绑须知</h4>
                            <p class="text-muted mb-3">每执行一次解绑将会扣除10积分。</p>
                            <form>
                                <div class="form-group">
                                    <label>姓名：</label>
                                    <input type="text" readonly="readonly" class="form-control" id="name" th:placeholder="${name}">
                                </div>
                                <div class="form-group">
                                    <label>账号：</label>
                                    <input type="text" readonly="readonly" class="form-control" id="studentNo" th:placeholder="${studentNo}">
                                </div>
                                <div class="form-group">
                                    <label>UserId：</label>
                                    <input type="text" readonly="readonly" class="form-control" id="userId" th:placeholder="${userId}">
                                </div>
                                <button type="submit" id="unBind" class="btn btn-gradient-primary">解绑</button>
                            </form>
                        </div>
                        <!--end card-body-->
                    </div>
                    <!--end card-->
                </div>
                <!--end col-->
            </div>
            <!--end row-->
        </div><!-- container -->
        <th:block th:include="include :: footer"/>
        <!--end footer-->
    </div><!-- end page content -->
</div><!-- end page-wrapper -->
<script>
    $(function(){
        $('#unBind').on('click', function(){
            event.preventDefault();
            var ii = layer.load(0, {shade: false});
            var name = document.getElementById("name").placeholder;
            var userId = document.getElementById("userId").placeholder;
            var header = $("meta[name='_csrf_header']").attr("content");
            var token =$("meta[name='_csrf']").attr("content");
            $.ajax({
                cache: false,
                type: "POST",
                url:"../action/unbind",
                contentType:'application/json;charset=UTF-8',
                data:JSON.stringify({"realName":name,"userId":userId}),
                async: true,
                beforeSend : function(xhr) {
                    xhr.setRequestHeader(header, token);
                },
                success: function(data) {
                    layer.close(ii);
                    if(data.code == '200'){
                        layer.msg(data.name + ',解绑成功!', {
                            icon: 1,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        }, function(){
                        });
                    }else{
                        layer.msg(data.name + ',' + data.msg +  ',解绑失败!', {
                            icon: 2,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        }, function(){
                        });
                    }
                },
            });
        });
    })
</script>
</body>

</html>